<template>
  <div class="app-container">
    <div>
      <el-button type="success" size="mini" @click="showAddDialog()" :disabled="!$hasBP('rbac:user:add')"
        >添加</el-button
      >
    </div>
    <el-table :data="list" border fit style="width: 100%">
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="password" label="密码"> </el-table-column>
      <el-table-column prop="trueName" label="真实名字"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="phone" label="电话"> </el-table-column>
      <el-table-column prop="phone" label="电话">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status===1"
            @change="switchStatus(scope.row)">
          </el-switch>  
        </template>
      </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间"> </el-table-column>
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            title="修改"
            @click="showUpdateDialog(scope.row.id)"/>
          <el-button
            :disabled="!$hasBP('rbac:user:delete')"
            size="mini"
            type="danger"
            icon="el-icon-delete"
            title="删除"
            @click="deleteById(scope.row.id)"/>
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-setting"
            title="分配角色"
            @click="showAssignRoleDialog(scope.row)"/>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="selectByPage"
      :current-page="page"
      :page-size="limit"
      :total="total"
      layout="total, prev, pager, next"
    >
    </el-pagination>

    <!-- 添加、修改dialog -->
    <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%">
      <el-form ref="form" :model="user" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="user.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item label="真实名字">
          <el-input v-model="user.trueName"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="user.email"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="user.phone"></el-input>
        </el-form-item>
        <el-form-item label="用户头像">
          <!-- 头像的缩略图 -->
          <pan-thumb :image="image" />
          <!-- 文件上传的按钮 -->
          <el-button
            type="primary"
            icon="el-icon-upload"
            style="position: absolute; bottom: 15px; margin-left: 40px"
            @click="imagecropperShow = true"
          >
            Change Avatar
          </el-button>
          <!-- 
                  v-show: 通过imagecropperShow控制是否弹出上传组件
                  :key: 类似于id，唯一标识
                  :url: 后台上传的url接口地址
                  @close: 关闭上传组件
                  @crop-upload-success：上传成功后的回调函数
                  <input type="file" name="file"/>
                     -->
          <image-cropper
            v-show="imagecropperShow"
            :key="imagecropperKey"
            :width="300"
            :height="300"
            url="/oss/upload/uploadImage"
            field="file"
            @close="close"
            @crop-upload-success="cropSuccess"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addOrUpdate">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 分配角色dialog -->
    <el-dialog title="分配角色" :visible.sync="dialogRoleVisible" width="40%">
      <el-form label-width="80px">
        <el-form-item label="用户名">
          <el-input disabled v-model="user.name"></el-input>
        </el-form-item>
        <el-form-item label="角色列表">
          <el-checkbox-group v-model="assignedRoleIdList">
            <el-checkbox v-for="role in roleList" :key="role.id" :label="role.id">{{role.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="assignRole()">保存</el-button>
          <el-button @click="dialogRoleVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
  
<script>
//引入user.js接口
import userApi from "@/api/rbac/user";
import roleApi from "@/api/rbac/role";
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
  name: "",
  components: { ImageCropper, PanThumb },
  data() {
    return {
      list: null, //表格对应的列表数据
      page: 1, //当前页
      limit: 10, //每页记录数
      total: 0, //总记录数

      dialogVisible: false,//添加、修改dialog
      user: {}, // 添加、修改对应封装User对象

      //图片上传相关
      imagecropperShow: false,
      imagecropperKey: 0,
      image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191',

      //角色分配
      roleList: [],
      assignedRoleIdList: [],
      dialogRoleVisible: false
    };
  },
  created() {
    this.selectByPage(this.page, this.limit);
  },
  methods: {
    selectByPage(page = 1) {
      this.page = page;
      userApi.selectByPage(this.page, this.limit).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total - 0;
      });
    },
    deleteById(id) {
      this.$confirm("您确认要删除么？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        userApi.deleteById(id).then((response) => {
          if (response.ok) {
            //提示信息
            this.$message({
              type: "success",
              message: response.msg,
            });
            //回到列表首页
            this.selectByPage();
          } else {
            this.$message({
              type: "error",
              message: response.msg,
            });
          }
        });
      });
    },
    showAddDialog() {
      this.dialogVisible = true
      this.user = {}
      this.image = 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
    },
    showUpdateDialog(id) {
      this.dialogVisible = true
      this.user = {}
      this.image = 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
      userApi.selectById(id).then(response => {
        this.user = response.data
        this.image = this.user.avatar
      })
    },
    addOrUpdate() {
      if (!this.user.id) {
        userApi.add(this.user).then(response => {
            if(response.ok) {
              //弹出提示
              this.$message({type: "success", message: response.msg});
              //关闭弹框
              this.dialogVisible = false
              //刷新数据
              this.selectByPage()
            }
        })
      } else {
        userApi.update(this.user).then(response => {
          if(response.ok) {
            this.$message({type: "success", message: response.msg});
            this.dialogVisible = false
            this.selectByPage()
          }    
        })
      }
      
    },
    switchStatus(row) {
      //对当前的status状态取反
      row.status = row.status === 1 ? 0 : 1
      userApi.updateStatus(row.id, row.status).then(response => {
        if(response.ok) {
          this.$message({type: "success", message: response.msg});
          this.selectByPage()
        }    
      })
    },
    showAssignRoleDialog(row) {
      this.user = row
      roleApi.selectAssignedRole(this.user.id).then(response => {
        console.log(response)
        this.roleList = response.data.roleList
        this.assignedRoleIdList = response.data.assignedRoleIdList
        this.dialogRoleVisible = true
      })
    },
    assignRole() {
      let roleIds = this.assignedRoleIdList.join(',')
      console.log(roleIds)
      roleApi.assignRole(this.user.id, roleIds).then(response => {
        if(response.ok) {
          this.$message({type: "success", message: response.msg});
          this.selectByPage()
          this.dialogRoleVisible = false
        }    
      })
    },
    cropSuccess(resData) {// resData data
      console.log(resData)
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
      this.user.avatar = resData
      this.image = resData
    },
    close() {
      this.imagecropperShow = false
    },    
  },
};
</script>
 
<style scoped>
</style>